<template>
    <div class='top'>
        <div class="title"><span v-show="props.isMust" class="must">*</span> {{ props.name }}</div>
        <span class="close" @click="close">
            <el-icon size="16">
                <Close />
            </el-icon>
        </span>
    </div>
    <slot></slot>
</template>
    
<script setup>
import { componentsNameList } from '@/store/pinia';
import { ElMessageBox } from 'element-plus'
const props = defineProps(['name','isMust'])
const emits = defineEmits('close')
const nameList = componentsNameList()
const close = e => {
    e.stopPropagation();
    ElMessageBox.confirm("是否删除该组件及对应配置项",
        'Delete',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'delete',
        }).then(() => {
            // nameList.deleteList(props.cIndex)
        }).catch(()=>{

        })
    
}
</script>
    
<style scoped>
.top {
    display: flex;
    justify-content: space-between;
}
.close:hover {
    color: red;
}
.must{
    color: red;
}
</style>